
@import '../variables.scss';

$prompt-background-user: #f1f5fd;


.MatcDialog.MatchOpenAIChatDialog {
    width: 920px;
    height: 720px;
    max-height: 90vh;

  
    .MatcToolbarTabs a {
        border-bottom: 2px solid transparent;
    
        &.MatcToolbarTabActive {
          border-bottom-width: 2px;
          border-bottom: 2px solid $main_color;
        }
    }
    
    .MatcToolbarTabsBig {
        margin-bottom: 20px;
    }
    
    .MatchOpenAIChatDialogHint {
        padding: 16px;
        background: #f9ed8371;
        border: 1px solid #f9ed83;
    }
  
    .MatchOpenAIChatCntr {
     
        height: 100%;
        position: relative;

        .MatchOpenAIChatMessages {
            display: flex;
            flex-direction: column;
            gap: 16px;
            overflow: auto;
          
            height: 100%;
            padding-bottom: 200px;
        }

        .MatchOpenAIChatMessage {
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }

        .MatchOpenAIChatMessageUser {
            width: 32px;
            height: 32px;
            border-radius: 50%;
          
        }


        .MatchOpenAIChatMessageContent {
            flex-grow: 1;
            margin-top: 4px;
            color: #333;
            padding: 16px;
            border-radius: 16px;
            font-size: 14px;
        
        }

        .MatchOpenAIChatMessage.qux {
       
            .MatchOpenAIChatMessageContent {
                border-top-left-radius: 0px;
                background: rgba(55, 136, 242, 0.2549019608);
                color: #3787f2;
            }
            .MatchOpenAIChatMessageUser {
                background: #3787f2;
            }
        }

        .MatchOpenAIChatMessage.user {
            flex-direction: row-reverse;

            .MatchOpenAIChatMessageContent {
                border-top-right-radius: 0px;
      
                background:$prompt-background-user;// rgba(33,33,33, 0.1549019608);
                color: #333;
            }
            .MatchOpenAIChatMessageUser {
                background: black ;
            }
        }


        .MatchOpenAIChatPrompt{
            position: absolute;
            bottom: 8px;
            width: 80%;
            left: 10%;
            border-radius: 8px;
            box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
            display: flex;
            gap: 8px;
            padding: 8px;
            align-items: center;
            background:#fff;

            .MatcButton {
                width: 120px;
                text-align: center;
            }

            textarea {
                height: 64px;
                border: 0px;
                flex-grow: 1;
                padding: 0px;
                background: none;
            }
        }

    }
  
  
  
  
  
  
    .VommondRadioBoxList > div {
      display: flex;
      flex-direction: column;
  
      .VommondRadioBoxListItem {
        width: auto;
      }
    }
  
    .MatchImportDialogCntrConfig {
      height: 48px;
      display: flex;
      gap: 32px;
    }
  
    .MatchImportDialogPreviewCntr {
      width: 300px;
      border: transparent 1px dashed;
      position: relative;
  
      .MatcHint {
        color: $text_color_passive;
        position: absolute;
        width: 60%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: 0.2s all;
        font-size: 24px;
        text-align: center;
      }
  
    }
  
    .MatchImportOpenAIDialogDesktop {
        .MatchImportDialogPreviewCntr {
          width: 520px;
        }
    }
  
  
    .MatchImportDialogProgressCntr {
      display: block;
      margin-top: 24px;
      opacity: 0;
      width: 100%;
      height: 8px;
   
      overflow: hidden;
    }
  
    .MatchImportDialogProgress {
      height: 100%;
      width: 100%;
      background: $main_color;
      border-radius: 4px;
    }
  

    .MatchImportOpenAIDialogSimulator {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 4px;
      border: 1px solid hsl(0deg, 0%, 86%);
      position: absolute;
    }

  
  }
  
  
  @keyframes rob1 {
    0%   {transform: translate(0, 0);}
    33%   {transform: translate(2px, 0px);}
    66%   {transform: translate(2px, 2px);}
    100%   {transform: translate(0px, 2px);}
  }
  
  @keyframes robo {
    0%   {transform: rotate(10deg);}
    33%   {transform: rotate(0deg)}
    66%   {transform: rotate(-10deg);}
    100%   {transform: rotate(0deg);}
  }
  
  
  
  
  @keyframes aiRunning {
    0%   {width: 1%;}
    100% {width: 100%}
  }
  